import ReactDom from "react-dom";

import "antd/dist/antd.min.css";

// 1 引入
import React, { useEffect, useState } from "react";

function App() {
  const [count, setCount] = useState(0);
  const [msg, setMsg] = useState("");

  // 1. []
  // 含义：代表挂载时，等同于componentDidMount, 只执行一次
  // 场景：🔔发请求、监听事件、开启定时器
  // useEffect(() => {
  //   console.log('我被执行了  ----->  ');
  // }, []);

  // 2. [依赖项]  代表：挂载时和更新时二合一，
  // 含义：只会监听挂载时和状态改变时，注意💥，只会监听依赖项的改变，非依赖项不会触发
  // 相当于componentDidMount和componentDidUpdate二合一
  // 场景：缓存
  useEffect(() => {
    console.log("我被执行了  ----->  ");
  }, [count]); // [依赖项] 🔔 类似vue中的侦听器，开了immediately

  // 3. 👎不传，一般不这么写，可能造成页面卡顿
  // 含义：相当于componentDidMount和componentDidUpdate二合一
  // 不同：监听全部的依赖项变化
  useEffect(() => {
    console.log("我被执行了  ----->  ");
  });
  return (
    <div>
      msg -- {msg}
      <hr />
      count -- {count}
      <hr />
      <button onClick={() => setMsg(msg + "~")}>点我修改msg</button>
      <button onClick={() => setCount(count + 1)}>点我修改count</button>
    </div>
  );
}

ReactDom.render(<App />, document.querySelector("#root"));
